<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
    <style type="text/css">
        #img1 {
            vertical-align: bottom;
        }
    </style>
</head>
<body>
<div id="mycart">
    <div v-if="cartitemPage==null||cartitemPage.length==0">
        <el-empty description="空空如也！请添加商品"></el-empty>
    </div>
    <div v-if="cartitemPage.length>0">
        <el-table
                ref="multipleTable"
                :data="cartitemPage"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="100">
            </el-table-column>
            <el-table-column
                    label="商品编号"
                    width="120">
                <template slot-scope="scope">{{ scope.row.productId }}</template>
            </el-table-column>
            <el-table-column
                    label="店铺"
                    width="200">
                <template slot-scope="scope">
                    <el-image id="img1" :src="scope.row.shopImgSrc" style="width: 60px;height: 60px"></el-image>
                </template>
            </el-table-column>

            <el-table-column
                    prop="productName"
                    label="商品名称"
                    width="240">
            </el-table-column>
            <el-table-column
                    label="商品图片"
                    width="240">
                <template slot-scope="scope">
                    <el-image :src="scope.row.productImgSrc" style="width: 120px;height: 100px"></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="productPrice"
                    label="单价"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="count"
                    label="数量"
                    width="150">
                <template slot-scope="scope">
                    <el-input type="number" v-model="scope.row.count"
                              @change="handleChange(scope.row.count,scope.row.productId)" :min="0" :max="999"
                              size="small"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="sumPrice"
                    label="小计"
                    width="120">
            </el-table-column>
            <el-table-column
                    label="操作"
                    fixed="right"
                    width="200">
                <template slot-scope="scope">
                    <el-button
                            @click.native.prevent="deleteProduct(scope.row.productId)"
                            type="text"
                            size="small">
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button @click="toggleSelection()">取消选择</el-button>
            <span class="demonstration">当前页小计为：  {{totalPrice}}  (元)  </span>
            <el-button type="primary" @click="goOrderPreview()">结算</el-button>
        </div>
        <div class="block" align="center">
            <el-pagination
                    layout="total, prev, pager, next"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    @current-change="handleCurrentChange"
                    :total="recordsNum">
            </el-pagination>
        </div>
    </div>
</div>
<script>
    var mycart = new Vue({
        el: "#mycart",
        data: {
            currentPage: 1,
            pageSize: 5,
            pages: 0,
            recordsNum: 0,
            cartitemPage: [],
            ids: [],
            totalPrice: 0.00,
            updateId: 0,
        },
        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
                this.totalPrice = 0.00;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                // var v1=JSON.stringify(val);
                var ids = [];
                for (let i = 0; i < val.length; i++) {
                    ids.push(val[i].productId)
                }
                this.ids = ids;
                this.calculateTotalPrice();
                if (val.length == 0) {
                    this.totalPrice = 0.00;
                }
            },
            //分页查询方法
            selectPage() {
                var param = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                };
                var vueObj = this;
                $.post("/cartitem/selectPage", param, function (data) {
                    vueObj.cartitemPage = data.records;
                    vueObj.pages = data.pages;
                    vueObj.recordsNum = data.total;
                })
            },
            deleteProduct(productId) {
                var vueObj = this;
                var param = {
                    count: 0,
                    productId: productId,
                }
                $.post("/cartitem/updateCartItemCount", param, function (data) {
                    if (data = "ok") {
                        vueObj.selectPage();
                    }
                })
            },
            calculateTotalPrice() {
                console.log(this.ids)
                if (this.ids == 0) {
                    return;
                }
                var vueObj = this;
                $.post("/cartitem/calculateTotalPrice", {productIds: this.ids}, function (data) {
                    console.log(data)
                    vueObj.totalPrice = data
                })
            },
            goOrderPreview() {
                /*结算按钮方法*/
                //console.log(window.parent.vue)
                //console.log(window.parent.app.flag)
                //console.log(this)
                //获得主页对象
                if (this.ids.length < 1) {
                    this.meassageAlert("请至少选择一件商品结算！");
                    return;
                }
                window.parent.app.ids = this.ids;
              //  window.parent.app.work = "<iframe frameborder=0 width=100% height=100% src='orderPreview.html'></iframe>";
                window.parent.app.openWork("orderPreview.html");
                //location.href = "/orderPreview.html";

            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.selectPage();

            },
            handleChange(count, productId) {
                var reg = /^\d+$/;
                if (!reg.test(count)) {
                    return;
                }
                console.log(count)
                console.log(productId)
                var vueObj = this;
                var param = {
                    count: count,
                    productId: productId,
                }
                $.post("/cartitem/updateCartItemCount", param, function (data) {
                    if (data = "ok") {
                        vueObj.selectPage();
                    }
                })
            },
            meassageAlert(context) {
                this.$message({
                    showClose: true,
                    message: context,
                    type: 'warning'
                });
            },

        },
        created() {
            this.selectPage();
        },
    });
</script>
</body>
</html>
